<template>
  <div class="bg">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else class="host-body">
      <!-- 第一行 -->
      <div class="first-row">
        <dv-decoration-10 class="dv-dec-10-l" />
        <dv-decoration-8 class="dv-dec-8" />
        <span class="title-text">大数据可视化平台</span>
        <dv-decoration-8 :reverse="true" class="dv-dec-8" />
        <dv-decoration-10 class="dv-dec-10-r" />
      </div>
      <!-- 第二行 -->
      <div class="seconed-row">
        <div class="sr-leftDiv">
          <div>工序任务</div>
        </div>
        <div class="sr-centerDiv">
          <div><dv-decoration-3 style="width:100%;" /></div>
        </div>
        <div class="sr-rightDiv">
          <div></div>
          <div><span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span></div>
        </div>
      </div>
      <!-- 第三行 -->
      <div class="third-row">
        <div class="tr-itemDiv"><dv-border-box-12 class="dv-bor-box-12"><CenterLeft></CenterLeft></dv-border-box-12></div>
        <div class="tr-centerDiv"><dv-border-box-1 class="dv-bor-box-1"><CenterBox style="height: 100%;padding-top: 30px;"></CenterBox></dv-border-box-1></div>
        <div class="tr-itemDiv"><dv-border-box-12 class="dv-bor-box-12"><CenterRight></CenterRight></dv-border-box-12></div>
      </div>
      <!-- 第四行 -->
      <div class="four-row">
        <div class="fr-leftDiv"><dv-border-box-13 class="dv-bor-box-13"><BottomLeft></BottomLeft></dv-border-box-13></div>
        <div class="fr-rightDiv"><dv-border-box-8 class="dv-bor-box-8"><BottomRight></BottomRight></dv-border-box-8></div>
      </div>
    </div>
  </div>
</template>

<script>
import CenterBox from './center'
import CenterLeft from './centerLeft'
import CenterRight from './centerRight'
import BottomLeft from './bottomLeft'
import BottomRight from './bottomRight'
export default {
  components: { CenterBox, CenterLeft, BottomLeft, BottomRight, CenterRight },
  data() {
    return {
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000']
    }
  },
  mounted() {
    this.loading = false
    this.timeFn()
  },
  methods: {
    formatTime(time, fmt) {
      if (!time) return ''
      else {
        const date = new Date(time)
        const o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'H+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds(),
          'q+': Math.floor((date.getMonth() + 3) / 3),
          S: date.getMilliseconds()
        }
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + '').substr(4 - RegExp.$1.length)
          )
        }
        for (const k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            )
          }
        }
        return fmt
      }
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = this.formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = this.formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-image: url("../../../assets/pageBg.png");
  background-size: cover;
  background-position: center center;
  color: #d3d6dd;
  overflow: hidden;
  .host-body {
    .first-row {
      width: 100%;
      height: 50px;
      margin: 10px 0 0;
      display: flex;
      justify-content: space-between;
      .dv-dec-10-l,.dv-dec-10-r {
        width: 30%;
        height: 10px;
      }
      .dv-dec-10-r {
        transform: rotateY(180deg);
      }
      .dv-dec-8 {
        width: 10%;
        height: 25px;
      }
      .title-text {
        width: 20%;
        margin: 0 auto;
        text-align: center;
        font-size: 20px;
      }
    }
    .seconed-row {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-around;
      .sr-leftDiv,.sr-centerDiv,.sr-rightDiv {
        height: 50px;
        text-align: center;
      }
      .sr-leftDiv {
        width: 40%;
        padding-left: 50px;
        display: flex;
        justify-content: flex-start;
      }
      .sr-centerDiv {
        width: 20%;
      }
      .sr-rightDiv {
        width: 40%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
      }
    }
    .third-row {
      width: 100%;
      height: 260px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .tr-itemDiv {
        width: 33%;
        height: 100%;
      }
      .tr-centerDiv {
        width: 35%;
        height: 100%;
      }
      .dv-bor-box-12,.dv-bor-box-6,.dv-bor-box-7,.dv-bor-box-1 {
        width: 100%;
        height: 100%;
        text-align: center;
      }
    }
    .four-row {
      width: 100%;
      height: 400px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .fr-leftDiv {
        width: 45%;
        height: 100%;
      }
      .fr-rightDiv {
        width: 53%;
        height: 100%;
      }
      .dv-bor-box-13,.dv-bor-box-8 {
        width: 100%;
        height: 100%;
        padding-right: 40px;
        text-align: center;
      }
    }
  }
}
</style>
